<template>
  <div class="info-right">
    <div class="eq-right-top">
      <div class="eq-right-top-title">
        <img src="../../../assets/images/home-page/eq-right.png" alt="" />
        所在区域
      </div>
      <div class="eq-right-top-item">
        <div class="eq-locat">
          <div class="qe-loc-box">
            <el-icon style="color: #fff"><Location /></el-icon>
            <span>110kV</span>
            <!-- <span>{{ videoBoj.parentName || '' }}</span> -->
            <!-- <span v-if="videoBoj.parentName"> 》</span> -->
            <span>{{ videoBoj.deviceName || '' }}</span>
          </div>
        </div>
        <div class="eq-r-t-i-title">
          <span class="eq-dio"></span>
          <span class="eq-d-title">统计</span>
        </div>
        <div class="qe-loc-item">
          <div class="eq-loc-item-box" v-for="(item, index) in locationList" :key="index">
            <div class="eq-loc-i-b-img">
              <img v-if="item.deviceClassify === '球机'" src="../../../assets/images/home-page/l-01.png" alt="" />
              <img v-else-if="item.deviceClassify === '枪机'" src="../../../assets/images/home-page/l-02.png" alt="" />
              <img
                v-else-if="item.deviceClassify === '一体机'"
                src="../../../assets/images/home-page/l-03.png"
                alt=""
              />
              <img v-else src="../../../assets/images/home-page/l-04.png" alt="" />
              <div class="eq-loc-div">
                <span>{{ item.deviceClassify }}</span>
              </div>
            </div>
            <span class="eq-loc-i-b-right">{{ item.count }}</span>
          </div>
        </div>
        <div class="eq-loc-button">
          <div class="tab-headers">
            <div
              class="button"
              v-for="(tab, index) in tabs"
              :key="index"
              :class="{ active: givActiveIndex === index }"
              @click="givSwitchTab(index)"
            >
              {{ tab }}
            </div>
          </div>
          <div class="cbzt"> 设备<br />状态</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { busDeviceAlarmInfo, busAccount, getVideoClassifyCounts } from '@/api/auth/ledger.js';
  import { getWarningInfo } from '../../../utils/ue.js';
  import NcVideoPlayer from '@/views/home/components/video/NcVideoPlayer.vue';
  import hong from '@/assets/images/home-page/gj-hong.png';
  import huang from '@/assets/images/home-page/gj-huang.png';
  import lan from '@/assets/images/home-page/cheng.png';
  import { tagsStore } from '@/stores';
  const authNav = tagsStore();
  const emit = defineEmits();
  const props = defineProps(['contentList', 'runList', 'deviceCode']);
  const activeIndex = ref(0); // 默认显示第一个选项卡
  const givActiveIndex = ref(0);
  const tabs = ['全部', '离线', '在线'];
  const alarmList = ref([]);
  const detailsObj = ref({});
  const locationList = ref([]);
  const paramsVideo = ref({
    deviceCode: '',
    pageNum: 0,
    pageSize: 1
  });
  const typeCode = ref(1);
  const videoBoj = ref({});
  const params1 = ref({
    videoLabel: 0,
    videoStatus: 0
  });

  function alarmIcon(level) {
    const icons = {
      1: huang,
      2: lan,
      3: hong
    };
    return icons[level] || icons['3']; // 默认图标
  }
  const getBusVideo = () => {
    if (!authNav.deviceCode) {
      return;
    }
    paramsVideo.value.deviceCode = authNav.deviceCode;
    busAccount(paramsVideo.value).then((res) => {
      videoBoj.value = res.data.data[0];
      console.log('res', res);
    });
  };
  const getBusDeviceAlarmInfo = () => {
    getVideoClassifyCounts(params1.value).then((res) => {
      locationList.value = res.data;
    });
  };
  function switchTab(index) {
    activeIndex.value = index;
    emit('switchTab', index);
  }
  function givSwitchTab(index) {
    givActiveIndex.value = index;
    params1.value.videoStatus = index;
    getBusDeviceAlarmInfo();
  }
  function showDetails(item, index) {
    getWarningInfo(item);
  }
  const xjChange = () => {
    console.log('生成图表');
    emit('xjChange');
  };
  onMounted(() => {
    console.log('authNav', authNav.deviceCode);
    getBusDeviceAlarmInfo();
    getBusVideo();
  });
  // 确保在组件卸载时销毁图表实例
  onUnmounted(() => {});
</script>

<style lang="scss" scoped>
  .info-right {
    width: 360px;
    position: absolute;
    top: 120px;
    right: 18px;
    z-index: 999;
    .eq-right-top {
      width: 100%;
      // margin-top: 15px;
      .eq-right-top-title {
        width: 100%;
        height: 33px;
        background: rgba(10, 39, 82, 1);
        display: flex;
        align-items: center;
        color: #fff;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        img {
          width: 20px;
          height: 21px;
          margin: 0 5px 0 10px;
        }
      }
      .eq-right-top-item {
        height: 79vh;
        width: 100%;
        background: rgba(5, 30, 67, 0.6);
        padding-bottom: 13px;
        padding-top: 10px;
        .eq-locat {
          width: 320px;
          height: 50px;
          background-image: url('../../../assets/images/home-page/wz-bg.png');
          background-size: 100% 100%;
          margin: 0 auto;
          .qe-loc-box {
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 15px;
            span {
              font-family: PingFang SC;
              font-size: 14px;
              color: #ffffff;
              margin: 0 3px;
            }
          }
        }
        .eq-r-t-i-title {
          width: 100px;
          display: flex;
          align-items: center;
          padding-top: 6px;
          margin-left: 20px;
          .eq-dio {
            width: 8px;
            height: 8px;
            background: #19db3c;
            border-radius: 50%;
          }
          .eq-d-title {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
            margin-left: 5px;
          }
        }
        .qe-loc-item {
          width: 100%;
          height: 36vh;
          .eq-loc-item-box {
            width: 320px;
            height: 80px;
            background-image: url('../../../assets/images/home-page/l-item-bg.png');
            background-size: 100% 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            .eq-loc-i-b-img {
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin-left: 15px;
              img {
                width: 41px;
                height: 50px;
              }
              .eq-loc-div {
                width: 92px;
                height: 29px;
                background-image: url('../../../assets/images/home-page/l-i-bg.png');
                background-size: 100% 100%;
                text-align: center;
                span {
                  font-family: PingFang SC;
                  font-weight: 500;
                  font-size: 12px;
                  color: #ffffff;
                  line-height: 27px;
                  text-shadow: 0px 2px 3px #006767;
                  background: linear-gradient(180deg, #ffffff 0%, #a3fffc 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
              }
            }
            .eq-loc-i-b-right {
              width: 30%;
              font-family: DIN;
              font-weight: 500;
              font-size: 30px;
              color: #e6ba73;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
        .eq-loc-button {
          width: 320px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: right;
          .tab-headers {
            width: 196px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .button {
              cursor: pointer;
              width: 64px;
              height: 50px;
              background-image: url('../../../assets/images/home-page/sb-bg.png');
              background-size: 100% 100%;
              font-family: PingFang SC;
              font-size: 12px;
              color: #ffffff;
              display: flex;
              align-items: center;
              justify-content: center;
              &.active {
                background-image: url('../../../assets/images/home-page/sb-bg-act.png');
              }
            }
          }
        }
        .cbzt {
          width: 70px;
          height: 64px;
          background-image: url('../../../assets/images/home-page/sb-type.png');
          background-size: 100% 100%;
          margin-top: 10px;
          font-family: PingFang SC;
          font-size: 12px;
          color: #f7f2ea;
          text-shadow: 0px 1px 2px #124a43;
          line-height: 14px;
          padding-top: 13px;
          text-align: center;
        }
      }
    }
  }
</style>
